<template>
  <view class="main-box">
    <z-paging ref="paging" v-model="data.list" @query="getExtendCodeList" refresher-enabled>
      <view class="c-pd">
        <view class="bg-white py-3 px-1 box-border c-br mb-3" v-for="(item, index) in data.list" :key="index">
          <van-row gutter="10">
            <van-col span="8">
              <image @click="showBigImg(item.applyWxAppUrl)" :src="item.applyWxAppUrl" class="img-class"> </image>
            </van-col>
            <van-col span="16">
              <van-row>
                <van-col span="9">
                  <text class="c-text-color-grey c-text-12"> 小区： </text>
                </van-col>
                <van-col span="15">
                  <text class="c-text-12"> {{ item.villageName }}</text>
                </van-col>
              </van-row>
              <van-row>
                <van-col span="9">
                  <text class="c-text-color-grey c-text-12"> 服务模版： </text>
                </van-col>
                <van-col span="15">
                  <text class="c-text-12">{{ item.serverModelName }}</text>
                </van-col>
              </van-row>
              <van-row>
                <van-col span="9"><text class="c-text-color-grey c-text-12"> 推广模版： </text> </van-col>
                <van-col span="15">
                  <text class="c-text-12">{{ item.promoteModelName }}</text>
                </van-col>
              </van-row>
              <van-row>
                <van-col span="9"><text class="c-text-color-grey c-text-12"> 一级推广员： </text></van-col>
                <van-col span="15">
                  <text class="c-text-12">{{ item.promoteUserName }}</text>
                </van-col>
              </van-row>
              <van-row>
                <van-col span="9">
                  <text class="c-text-color-grey c-text-12"> 二级推广员： </text>
                </van-col>
                <van-col span="15">
                  <text class="c-text-12">{{ item.userName }}</text>
                </van-col>
              </van-row>
              <van-row>
                <van-col span="9"><text class="c-text-color-grey c-text-12"> 业务员： </text></van-col>
                <van-col span="15">
                  <text class="c-text-12">{{ item.saleUserName }}</text>
                </van-col>
              </van-row>
            </van-col>
          </van-row>
          <view class="line my-2"></view>
          <view class="px-1 border-box">
            <i class="i-basil:location-outline w-4 h-4"></i>
            <text class="c-text-12">{{ item.address }}</text>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script setup lang="ts">
import UserRequest from '@/request/userRequest';

interface IData {
  pages: {
    pageNo: number;
    pageSize: number;
    totalPage: number;
  };
  list: IUserStack[];
}

const data = reactive<IData>({
  pages: {
    pageNo: 1,
    pageSize: 20,
    totalPage: 1,
  },
  list: [],
});

const paging = ref();

const getExtendCodeList = (pageNo: number, pageSize: number) => {
  UserRequest.GetExtendCodeList({ pageNo, pageSize, hasLoading: true })
    .then((res) => {
      paging.value.complete(res.data.list);
    })
    .catch((err) => {
      paging.value.complete(false);
    });
};

const showBigImg = (url: string) => {
  uni.previewImage({
    urls: [url], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
  });
};
</script>

<style lang="scss" scoped>
.main-box {
  .img-class {
    width: 100%;
    height: 200rpx;
  }

  .line {
    height: 4rpx;
    border-top: 1px solid #ddd;
  }
}
</style>
